<script lang="ts" setup>
import { reactive, ref, Ref } from 'vue';
import { JxtechModelFormCallback, useJxtechModelForm } from '@whjxtech/jxtech-component';
import jxudpStationServiceApi from '/@/api/org/bean/jxudp-station';

import UnitSelectInput from '/@/views/org/unit/component/unit-select-input.vue';
const emit = defineEmits<{
  (e: 'save-success', data: any, res: any): void; //保存成功回调
}>();

type JxtechStationTreeFormProps = {
  stationId?: string;
  superStationId?: string;
  superStationName?: string;
};

const props = defineProps<JxtechStationTreeFormProps>();

const JxtechModelFormRef = ref();
const { save } = useJxtechModelForm(JxtechModelFormRef);

const JxudpStationFormData: Ref<any> = ref({
  stationId: props.stationId,
  superStationId: props.superStationId,
  superStationName: props.superStationName,
});

const rules = {
  stationName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
};
const JxudpDataSourceFormState = reactive({
  primaryKey: 'stationId',
  /**新增成功 */
  onSaveSuccess: (formData: any, res: any) => {
    emit('save-success', formData, res);
  },
  callback: {
    preAdd(formData: any) {
      formData.superStationId = props.superStationId;
      return true;
    },
  } as JxtechModelFormCallback,
});

defineExpose({
  save: () => save(),
});
</script>
<template>
  <jxtech-model-form
    ref="JxtechModelFormRef"
    :service-api="jxudpStationServiceApi"
    :primary-key="JxudpDataSourceFormState.primaryKey"
    :form-data="JxudpStationFormData"
    :rules="rules"
    label-position="top"
    :callback="JxudpDataSourceFormState.callback"
    @save-success="JxudpDataSourceFormState.onSaveSuccess"
  >
    <el-row>
      <el-col :span="24">
        <jxtech-model-form-item label="岗位名称" prop="stationName">
          <el-input
            placeholder="请输入岗位名称"
            v-model="JxudpStationFormData.stationName"
          ></el-input>
        </jxtech-model-form-item>
      </el-col>
      <el-col :span="24">
        <jxtech-model-form-item label="父级岗位" prop="superStationName">
          <el-input v-model="JxudpStationFormData.superStationName" disabled></el-input>
        </jxtech-model-form-item>
      </el-col>
      <el-col :span="24">
        <jxtech-model-form-item label="关联部门" prop="deptId">
          <unit-select-input
            v-model:unitId="JxudpStationFormData.deptId"
            v-model:unitName="JxudpStationFormData.unitName"
          ></unit-select-input>
        </jxtech-model-form-item>
      </el-col>
      <el-col :span="24">
        <JxtechCascaderAddress></JxtechCascaderAddress>
      </el-col>
    </el-row>
  </jxtech-model-form>
</template>
